<template>
	<view class="bolck">
		<view class="logo">
			<image src="@/static/image/logo.png" mode=""></image>
		</view>
		<view class="xiahuaxian" style="margin-top: 186rpx;">
			<input class="input" type="number" placeholder="请输入手机号" v-model="account">
		</view>
		<view class="xiahuaxian flexbetween margin_top">
			<input class="input" type="password" placeholder="请输入密码" v-model="password">
			<view class="xiaohui ershiba nofonweight" @click="tzwjmm">忘记密码</view>
		</view>
		<view class="margin_top5 flexleft" @click="type=!type">
			<u-icon name="checkmark-circle-fill" v-if="type" color="#50B674" size="16" class="margin_right1"></u-icon>
			<u-icon name="checkmark-circle-fill" v-if="!type" color="#999" size="16" class="margin_right1"></u-icon>
			<!-- <view class="yigouxuanl margin_right1" v-show="type"></view>
			<view class="erigouxl margin_right1"  v-show="!type"></view> -->
			<view class="flexleft">
				<view class="xiaohei strongtext nofonweight">已阅并同意</view>
				<view class="xiaolv strongtext fonweight" @click.stop="jumpurl('/pages/system/system?type=1')">《用户协议》
				</view>
				<view class="xiaohei strongtext nofonweight">&</view>
				<view class="xiaolv strongtext fonweight" @click.stop="jumpurl('/pages/system/system?type=2')">《隐私协议》
				</view>
			</view>
		</view>
		<view class="bigbtn margin_top2" @click="login()">登录</view>
		<view class="flexcenter margin_top" @click="tzzc">
			<view class="xiaohui ershiba nofonweight">还没有账号？</view>
			<view class="xiaohei ershiba nofonweight">去注册</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="margin_top5">
			<view class="flexcenter">
				<view class="line margin_right2"></view>
				<view class="xiaohei ershil nofonweight margin_right2">第三方登录</view>
				<view class="line "></view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="margin_top5"  v-if="platform!='ios'">
			<view class="flexcenter">
				<view class="line margin_right2"></view>
				<view class="xiaohei ershil nofonweight margin_right2">第三方登录</view>
				<view class="line "></view>
			</view>
		</view>
		<!-- #endif -->
		<view class="margin_top flexcenter" style="padding: 0 70rpx;">
			<!-- #ifdef MP-WEIXIN -->
			<view class=" flexcenter" @click="mpwxlogin">
				<view class="">
					<!-- <view class="weixin marginauto"></view> -->
					<view class="xiaohei ershil nofonweight textcenter">手机号快捷登录</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || H5 -->
			<view class=" flexcenter" @click="wxLogin" v-if="platform!='ios'">
				<view class="">
					<!-- <view class="weixin marginauto"></view> -->
					<view class="xiaohei ershil nofonweight textcenter">手机号快捷登录</view>
				</view>
			</view>
			<!-- <view class="flexcenter sanshi">
				<view class="">
					<view class="qqdl marginauto"></view>
					<view class="xiaohei ershil nofonweight textcenter">QQ</view>
				</view>
			</view>
			<view class="flexcenter sanshi">
				<view class="">
					<view class="zhifubao marginauto"></view>
					<view class="xiaohei ershil nofonweight textcenter">支付宝</view>
				</view>
			</view> -->
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				type: false,
				account: "",
				password: "",
				loginType: 1,
				platform:"",
			}
		},
		onLoad() {
			this.platform = uni.getSystemInfoSync().platform
		},
		methods: {
			mpwxlogin() {
				uni.navigateTo({
					url: '/pages/login/wxlogin'
				})
			},
			wxLogin() { //微信登录
				let _this = this
				_this.loginType = 1
				if (!_this.type) {
					httpRequest.toast('请认真阅读并勾选用户协议');
					return false;
				}
				let parameters = {
					code: "",
					platform: "wxapp",
				}
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(loginRes) {
						console.log(JSON.stringify(loginRes), 'loginRes');
						// return false
						parameters.code = loginRes.code
						// 登录成功
						_this.getLogin(parameters, "wx")
					},
					fail: function(err) {
						console.log(err, 'qq授权失败');
						// 登录授权失败  
						// err.code是错误码
					}
				});
			},
			qqLogin() { //qq登录
				let _this = this
				_this.loginType = 2
				if (!_this.quan) {
					httpRequest.toast('请认真阅读并勾选用户协议');
					return false;
				}
				let parameters = {
					openId: '',
					unionid: '',
					access_token: '',
					platform: "qqapp",
					nickName: '',
					avatarUrl: '',
					gender: '',
				}
				uni.login({
					provider: 'qq',
					success: function(loginRes) {
						console.log(JSON.stringify(loginRes), 'loginRes');
						parameters.openId = loginRes.authResult.openid
						parameters.access_token = loginRes.authResult.access_token
						// 登录成功
						uni.getUserInfo({
							provider: 'qq',
							success: function(info) {
								// 获取用户信息成功, info.authResult保存用户信息
								console.log(JSON.stringify(info), 'info99999999');
								parameters.nickName = info.userInfo.nickName
								parameters.avatarUrl = info.userInfo.avatarUrl
								parameters.gender = info.userInfo.gender_type
								parameters.unionid = info.userInfo.unionid
								console.log(JSON.stringify(parameters));
								_this.getLogin(parameters, "qq")
							}
						})
					},
					fail: function(err) {
						console.log(err, 'qq授权失败');
						// 登录授权失败  
						// err.code是错误码
					}
				});
			},
			getLogin(userInfo, type) {
				console.log(userInfo);
				httpRequest.request("/api/user/wxlogin", 'GET', userInfo).then(resp => {
					// console.log(JSON.stringify(resp), "resp9999999999999999");
					console.log(resp, "resp9999999999999999");
					if (resp.code == 1) {
						if (resp.data.third.binding == 1 && userInfo.platform == 'wxapp') {
							httpRequest.toast('登录成功');
							uni.setStorageSync('token', resp.data.userinfo.token);
							uni.setStorageSync('user_id', resp.data.userinfo.user_id);
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						} else {
							httpRequest.toast(resp.msg);
							uni.navigateTo({
								url: "/pages/login/bindmobile?third_id=" + resp.data.third.third_id,
								fail(err) {
									console.log(err, "28939");
								}
							})
						}
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			login() {
				if (this.account == "") {
					httpRequest.toast("请输入手机号");
					return false;
				}
				// if(!this.isMobile(this.account)){
				// 	httpRequest.toast("手机号码格式错误!")
				// 	return;
				// }
				if (this.password == "") {
					httpRequest.toast("请输入密码")
					return false
				}
				if (!this.type) {
					httpRequest.toast("请认真阅读并勾选用户协议");
					return false;
				}
				httpRequest.request('/api/user/login', 'GET', {
					account: this.account,
					password: this.password
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast('登录成功');
						uni.setStorageSync('token', res.data.userinfo.token);
						uni.setStorageSync('user_id', res.data.userinfo.user_id);
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			// 跳转忘记密码
			tzwjmm() {
				uni.navigateTo({
					url: '/pages/login/wangjimm'
				})
			},
			// 跳转注册
			tzzc() {
				uni.navigateTo({
					url: '/pages/login/zhuce'
				})
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		width: 47rpx;
		height: 2rpx;
		background-color: #AAAAAA;
	}

	.erigouxl {
		width: 26rpx;
		height: 26rpx;
		border: 1rpx solid #F1F1F1;
		border-radius: 50%;
	}

	.yigouxuanl {
		width: 28rpx;
		height: 28rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/yigoux.png');
	}

	.bolck {
		padding: 120rpx 64rpx 50rpx;
	}

	.logo {
		margin: auto;
		width: 176rpx;
		height: 176rpx;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}
</style>